<template>
  <div class="wrap">
    <div class="page-head">
      <a-breadcrumb>
        <a-breadcrumb-item>{{$t('operateLog.operateLog.60zefuycyng0')}}</a-breadcrumb-item>
        <a-breadcrumb-item>{{$t('operateLog.operateLog.60zefuyd8jc0')}}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <c-table-search v-model:model="form.data" @refresh="getData">
      <a-col :span="8">
        <a-form-item field="value1" :label="$t('operateLog.operateLog.60zefuydags0')">
          <a-input v-model="form.data.value1" :placeholder="$t('operateLog.operateLog.60zefuydbv40')" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="value2" :label="$t('operateLog.operateLog.60zefuydcss0')">
          <a-input v-model="form.data.value2" :placeholder="$t('operateLog.operateLog.60zefuyddsc0')" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="value6" :label="$t('operateLog.operateLog.60zefuydeos0')">
          <a-input v-model="form.data.value6" :placeholder="$t('operateLog.operateLog.60zefuydfto0')" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="value7" :label="$t('operateLog.operateLog.60zefuydgyg0')">
          <a-range-picker style="width: 360px; margin: 0 24px 24px 0;" show-time
            :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }" format="YYYY-MM-DD HH:mm"/>
            <!-- <a-range-picker style="width: 360px; margin: 0 24px 24px 0;" show-time
            :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }" format="YYYY-MM-DD HH:mm" @change="onChange"
            @select="onSelect" @ok="onOk" /> -->
        </a-form-item>
      </a-col>
      <template v-slot:refresh>
        <a-button type="outline" @click="refresh">
          <template #icon>
            <icon-loop />
          </template>
        </a-button>
      </template>
    </c-table-search>
    <div class="table-scroll">
      <c-table v-model:data="list">
        <a-table-column :title="$t('operateLog.operateLog.60zefuydhow0')" data-index="key" ellipsis tooltip :width="60"></a-table-column>
        <a-table-column :title="$t('operateLog.operateLog.60zefuydags0')" data-index="user" ellipsis tooltip :width="80"></a-table-column>
        <a-table-column :title="$t('operateLog.operateLog.60zefuydcss0')" data-index="type" ellipsis tooltip :width="120"></a-table-column>
        <a-table-column :title="$t('operateLog.operateLog.60zefuydiqg0')" data-index="device" ellipsis tooltip :width="120"></a-table-column>
        <a-table-column title="IP" data-index="ip" ellipsis tooltip :width="180"></a-table-column>
        <a-table-column :title="$t('operateLog.operateLog.60zefuydjns0')" data-index="time" ellipsis tooltip :width="160"></a-table-column>
        <a-table-column :title="$t('operateLog.operateLog.60zefuydkc00')" data-index="operate" ellipsis tooltip :width="160"></a-table-column>
      </c-table>
    </div>
  </div>
</template>

<script lang='ts' setup>
const emit = defineEmits(['refresh'])
const refresh = () => {
  emit('refresh')
}
const form = reactive({
  data: {
    value1: '',
    value2: '',
    value3: '',
    value4: '',
    value5: '',
    value6: '',
    value7: ''
  }
})
const list = [{
  key: 1,
  user: 'admin',
  type: t('operateLog.operateLog.60zefuydlko0'),
  device: '',
  ip: '172.16.0.1',
  time: '2024-06-24 16:37:59',
  operate: t('operateLog.operateLog.60zefuydn2w0')
}, {
  key: 2,
  user: 'admin',
  type: t('operateLog.operateLog.60zefuydlko0'),
  device: '',
  ip: '172.16.0.1',
  time: '2024-06-24 16:37:59',
  operate: t('operateLog.operateLog.60zefuydn2w0')
}, {
  key: 3,
  user: 'admin',
  type: t('operateLog.operateLog.60zefuydlko0'),
  device: '',
  ip: '172.16.0.1',
  time: '2024-06-24 16:37:59',
  operate: t('operateLog.operateLog.60zefuydn2w0')
}, {
  key: 4,
  user: 'admin',
  type: t('operateLog.operateLog.60zefuydlko0'),
  device: '',
  ip: '172.16.0.1',
  time: '2024-06-24 16:37:59',
  operate: t('operateLog.operateLog.60zefuydn2w0')
}, {
  key: 5,
  user: 'admin',
  type: t('operateLog.operateLog.60zefuydlko0'),
  device: '',
  ip: '172.16.0.1',
  time: '2024-06-24 16:37:59',
  operate: t('operateLog.operateLog.60zefuydn2w0')
}];
const getData = () => {
  // console.log('111')
}
// 选择时间
// const onSelect = (dateString: any, date: any) => {
//   console.log('onSelect', dateString, date)
// }
// const onChange = (dateString: any, date: any) => {
//   console.log('onChange: ', dateString, date)
// }
// const onOk = (dateString: any, date: any) => {
//   console.log('onOk: ', dateString, date)
// }
</script>

<style scoped lang="less"></style>